<script setup lang="ts">
import { ref } from 'vue'
import TaskColumn from './TaskColumn.vue'
import TaskCard from './TaskCard.vue'

const props = defineProps<{
  tasks: any[]
  taskStatus: Record<string, string>
  dateRange: [Date, Date]
}>()

const emit = defineEmits<{
  (e: 'task-drop', taskId: string, newStatus: string): void
  (e: 'edit-task', task: any): void
}>()

// 获取特定状态的任务（增加日期筛选）
const getTasksByStatus = (status: string) => {
  return props.tasks.filter(task => {
    const taskDate = task.dueDate ? new Date(task.dueDate) : null
    return task.status === status && 
           (!props.dateRange[0] || !props.dateRange[1] || !taskDate || 
           (taskDate >= props.dateRange[0] && taskDate <= props.dateRange[1]))
  })
}

// 处理任务拖拽
const handleTaskDrop = (taskId: string, newStatus: string) => {
  emit('task-drop', taskId, newStatus)
}

// 处理修改任务
const handleEditTask = (task: any) => {
  emit('edit-task', task)
}
</script>

<template>
  <div class="task-board">
    <TaskColumn 
      v-for="status in Object.values(taskStatus)"
      :key="status"
      :title="status"
      :tasks="getTasksByStatus(status)"
      @task-drop="handleTaskDrop"
    >
      <template #default="{ task }">
        <TaskCard 
          v-bind="task"
          @edit-task="handleEditTask"
        />
      </template>
    </TaskColumn>
  </div>
</template>

<style scoped>
.task-board {
  display: flex;
  gap: 24px;
  padding: 20px;
  overflow-x: auto;
  min-height: calc(100vh - 200px);
  width: 100%;
  align-items: stretch;
}

.task-board > :deep(.task-column) {
  flex: 0 0 calc(25% - 18px);
  min-width: 280px;
  height: auto;
}
</style> 